<template>
	<view class="con">
		<!-- 列表 -->
		<view class="list">
			<view class="listli">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" :src="butieInfo.pic"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">{{butieInfo.dian}}</view>
					</view>
					<view class="listlity shangXiaCenter">
						<view>
							<view class="listlity1 flex flex_between">
								<view class="listlity1z flex flex_between">
									<view class="listlity1z1 flex">
										<image class="listlity1z1_img" :src="butieInfo.pingtai_ico" mode="widthFix">
										</image>
										<view class="listlity1z1_v">{{butieInfo.title}}</view>
									</view>
									<view class="listlity1z2 flex">
										<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
										</image>
										<view class="listlity1z2_v">{{butieInfo.ping_hongbao}}</view>
									</view>
								</view>
							</view>
							<view class="zhen_add" v-if="butieInfo.ping_if">{{butieInfo.ping_if}}</view>
						</view>
						<view>
							<view class="listlity3">剩余<text>{{butieInfo.cur_surplus}}</text>件</view>
							<view class="listlity4">
								<view class="listlity4cc"><text></text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="listlib flex flex_between">
					<view class="listlib_1 flex">
						<text class="listlib_1_t1">实付{{butieInfo.money}}</text>
						<text class="listlib_1_t2">补贴{{butieInfo.money_butie}}</text>
					</view>
					<view class="listlib_1 flex">
						<text class="listlib_1_t1">客返{{butieInfo.money_kefu}}</text>
						<text class="listlib_1_t3">{{butieInfo.money_pwd}}</text>
					</view>
				</view>
			</view>
			<view class="listli" style="height: auto;">
				<view class="zhn">
					<view class="tia flex flex_between">
						<view class="tiaz flex">
							<view class="tiazz">产品链接</view>
							<image class="tiazy" @click="showTan_wen" src="/static/index/img12.png" mode="widthFix">
							</image>
						</view>
						<view class="tiay">产品规格提示</view>
					</view>
					<view class="tiazlist">
						<view class="tiazlistli">{{butieInfo.url}}</view>
						<view class="tiazlistli">长按复制此条消息，打开抖音搜索，查看商品详情！</view>
					</view>
					<view class="zhnc flex flex_between">
						<view style="margin: 20rpx 0;">
							<view class="zhnc_y flex">
								<image class="zhnc_y_img" src="/static/index/img26.png" mode="widthFix"></image>
								<view class="zhnc_yc">复制链接</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- 这是新增的订单 -->
			<view v-if="isShowAddCon">
				<view class="listli" style="height: auto;">
					<view class="zhn">
						<view class="tiazlist1">
							<input type="number" placeholder="粘贴已付款订单编号(仅数字)" v-model="ordernum" class="tiazlistli"
								@input="onInputOrdernum" />
						</view>
						<view class="zhnc flex flex_between">
							<view class="zhnc_y flex">
								<view class="qiji_l_b flex">
									<view class="qiji_l_b_li flex" @click="chooseImageBtn('add','upLoadpic')">
										<view v-if="addUpLoadpic">
											<image class="qiji_l_b_img2" mode="widthFix" :src="addUpLoadpic"></image>
										</view>
										<view v-else>
											<image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix">
											</image>
											<view class="qiji_l_b_con">客服聊天</view>
										</view>
									</view>
									<view class="qiji_l_b_li flex" @click="chooseImageBtn('add','upLoadpic2')">
										<view v-if="addUpLoadpic2">
											<image class="qiji_l_b_img2" mode="widthFix" :src="addUpLoadpic2"></image>
										</view>
										<view v-else>
											<image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix">
											</image>
											<view class="qiji_l_b_con">支付订单</view>
										</view>
									</view>
								</view>
							</view>
							<view class="zhnc_z flex">
								<view class="zhnc_z1">有效时间</view>
								<view class="zhnc_z2">{{CountdownTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 刚进入页面的“确认提交”：先判断按钮状态是否为黄色（单号，和图片都上传以后），然后通过“继续补贴任务”判断能否进行提交，然后弹出确认框进行-提交 -->
				<view class="tijiaBtn" :class="addBtnStatue?'huanse':''" @click="addBtnHandler">确认提交</view>
			</view>
			<!-- 点击“再来一单”以后的“确认提交”，只需要判断按钮状态是否为黄色（单号，和图片都上传），如果都传了以后，弹出确认框进行-提交 -->
			<view class="tijiaBtn huanse" v-if="!isShowAddCon&&butieInfo.surplus_time>0" @click="moreOder">再来一单</view>
			<!-- 这个是后台返回的订单列表数据 butieInfo.task_item-->
			<view class="listli" style="height: auto;" v-if="item2.ordernum!==''"
				v-for="(item2,index2) in butieInfo.task_item" :key="index2">
				<view class="qiji_l">
					<view class="shizhe">
						<!-- 0、1审核中、2已校验、3校验无效、10已补贴（不会有没提交的订单） -->
						<view class="qiji_l_t">{{getMsgByState(item2.state1)}}</view>
						<view class="qiji_l_c flex flex_between">
							<input class="qiji_l_c_ipt" type="number" placeholder="粘贴已付款订单编号(仅数字)"
								v-model="item2.ordernum" />
							<view class="qiji_l_c_btn huise" @click="modifyOrder(item2)">修改</view>
						</view>
						<view class="qiji_l_t">待提交截图</view>
						<!-- 待提交的订单 -->
						<view class="qiji_l_b flex flex_between">
							<!-- 客服聊天 -->
							<view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic',item2,index2)">
								<view v-if="item2.pic.includes('http')">
									<image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic"></image>
									<!-- 蒙版 -->
									<view v-if="item2.isShowMengBan_1">
										<view class="mengban">{{getMsgByState(item2.state1)}}</view>
									</view>
								</view>
								<view v-else>
									<image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
									<view class="qiji_l_b_con">客服聊天</view>
								</view>
							</view>
							<!-- 支付订单 -->
							<view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic2',item2,index2)">
								<view v-if="item2.pic2.includes('http')">
									<image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic2"></image>
									<!-- 蒙版 -->
									<view v-if="item2.isShowMengBan_2">
										<view class="mengban">{{getMsgByState(item2.state1)}}</view>
									</view>
								</view>
								<view v-else>
									<image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
									<view class="qiji_l_b_con">支付订单</view>
								</view>
							</view>
							<!-- 快递签收 -->
							<view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic3',item2,index2)">
								<view v-if="item2.pic3.includes('http')">
									<image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic3"></image>
									<view v-if="item2.isShowMengBan_3">
										<!-- 蒙版 -->
										<view class="mengban">{{getMsgByState(item2.state2)}}</view>
									</view>
								</view>
								<view v-else>
									<image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
									<view class="qiji_l_b_con">快递签收</view>
								</view>
							</view>
							<!-- 产品好评 -->
							<view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic4',item2,index2)">
								<view v-if="item2.pic4.includes('http')">
									<image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic4"></image>
									<view v-if="item2.isShowMengBan_4">
										<!-- 蒙版 -->
										<view class="mengban">{{getMsgByState(item2.state2)}}</view>
									</view>
								</view>
								<view v-else>
									<image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
									<view class="qiji_l_b_con">产品好评</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="isShow || isShow_wen || isShow_timeOut" @click="hideTan"></view>
		<view class="tan" v-if="isShow">
			<view class="tan_title">确认提交</view>
			<view class="tan_t flex">
				<view class="tan_newli_wrap">
					<view class="tan_newli flex">
						<view class="tan_newli_v">感谢亲的参与补贴专区的活动，请确认提交的信息是否无误，已经提交不可修改</view>
					</view>
				</view>
			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d1" @click="hideTan">再看看</view>
				<view class="tan_b_d2" @click="goAddBtn">我确定</view>
			</view>
		</view>
		<!-- 通用问号弹出 -->
		<view class="tan tan_wen" v-if="isShow_wen">
			<view class="tan_title">关于低价专区</view>
			<view class="tan_t flex">
				<view class="tan_newli_wrap">
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">本专区为共享专区，信息来源于网络</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">每个ID每天仅限提取30个产品链接</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">请您自行甄别真伪，避免您资金损失</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">如您是商家您反对，请联系我们删除</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">请不要将本专区信息应用于非法途径</view>
					</view>
				</view>
			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d2" @click="hideTan">我已知晓</view>
			</view>
		</view>
		<!-- 超时弹出 -->
		<view class="tan tan_wen" v-if="isShow_timeOut">
			<view class="tan_title">非常抱歉</view>
			<view class="tan_t flex">
				<view class="tan_newli_wrap">
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">你的操作时间，超过了有效时间，本次补贴资格已失效，请重新选择补贴产品</view>
					</view>
				</view>
			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d2" @click="hideTan_timeOut">我已知晓</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProductButieOrder, //补贴任务内容详细
		otherPingpic, //上传图片
		productButieOrderSet, //提交补贴任务
		productButieGoOn //继续补贴任务
	} from '@/request/api.js'
	export default {
		data() {
			return {
				openid: uni.getStorageSync('openid'), //获取缓存的openid
				isShow: false,
				isShow_wen: false,
				isShow_timeOut: false,
				countdownTime: 10 * 60 * 1000, //倒计时初始时间
				CountdownTime: '', //倒计时时间显示
				timer: null, //定时器
				oid: '', //补贴任务ID
				butieInfo: {}, //补贴任务内容详细
				ordernum: '', //新增-订单号
				addUpLoadpic: '', //新增-客服聊天图片
				addUpLoadpic2: '', //新增-付款订单图片
				isShowAddCon: true, //新增成功以后,需要先隐藏新增模块,出现"再来一单"按钮
				addBtnStatue: false, //新增"确认提交"的按钮颜色;是否可以点击
				addOrderUseId: '', //新增订单时候的Id:继续补贴任务接口返回的id（点击再来一单）
				isHasOneKong: false, //判断返回的列表有一个为空的话，就需要先
			};
		},
		onLoad(options) {
			console.log('前一个页面传来的信息')
			console.log(options)
			this.oid = options.id
			this.getProductButieOrderFun(); //补贴任务内容详细
			this.getProductButieOrderFun2(); //补贴任务内容详细---用于进入页面的时候，进行“新增区域”和“再来一单”判断
		},
		computed: {

		},
		methods: {
			getProductButieOrderFun2() {
				let param = {
					openid: this.openid,
					oid: this.oid
				}
				let that = this
				getProductButieOrder(param).then(res => {
					// 如果没有已经提交的订单出现"新增那块",否则"隐藏"
					if (res.data.task_item.length === 1 && res.data.task_item[0].ordernum === '') {
						this.isShowAddCon = true
						this.addOrderUseId = res.data.task_item[0].id
					} else {
						this.isShowAddCon = false
					}
				})
			},

			// 获取补贴任务内容详细
			getProductButieOrderFun() {
				let param = {
					openid: this.openid,
					oid: this.oid
				}
				let that = this
				getProductButieOrder(param).then(res => {
					console.log('补贴任务内容详细')
					console.log(res)
					if (res.error_code === 0) {
						// this.butieInfo = res.data
						clearInterval(this.timer);
						that.countdownTime = res.data.surplus_time * 1000
						console.log('剩余时间(秒)，大于0时有效')
						console.log(that.countdownTime)
						if (that.countdownTime > 0) {
							that.startCountdown(that.countdownTime);
						}
						let list = res.data
						// 加一个字段---判断图片上是否显示状态蒙版
						if (list.task_item.length > 0) {
							list.task_item.forEach(item => {
								item.isShowMengBan_1 = true //第一张图的蒙版
								item.isShowMengBan_2 = true //第二张图的蒙版
								item.isShowMengBan_3 = true //第三张图的蒙版
								item.isShowMengBan_4 = true //第四张图的蒙版
							})
						}
						that.butieInfo = list
						that.$forceUpdate()
						console.log(that.butieInfo)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},

			// 根据状态返回文字
			getMsgByState(state) {
				let msg = ''
				if (state === '0' || state === '1') {
					msg = '审核中'
				} else if (state === '2') {
					msg = '已校验'
				} else if (state === '3') {
					msg = '校验无效'
				} else if (state === '10') {
					msg = '已补贴'
				}
				return msg
			},

			// 获取 新增"确认提交"的按钮颜色:单号,图片都上传
			getAddBtnStatue() {
				this.addBtnStatue = (this.ordernum !== '' && this.addUpLoadpic !== '' && this.addUpLoadpic2 !== '')
			},

			// 监听新增-输入的订单编号
			onInputOrdernum() {
				console.log(this.ordernum)
				this.getAddBtnStatue()
			},

			// 新增-确认提交-出现弹窗
			addBtnHandler() {
				if (this.addBtnStatue) {
					this.isShow = true
				} else {
					console.log('需要先填写单号，传两张图片')
				}

			},

			// 新增-确认提交弹窗-提交
			goAddBtn() {
				let param = {
					openid: this.openid,
					id: this.addOrderUseId,
					ordernum: this.ordernum,
					pic: this.addUpLoadpic,
					pic2: this.addUpLoadpic2
				}
				this.productButieOrderSetFun(param)
			},


			// 提交补贴任务
			productButieOrderSetFun(param) {
				productButieOrderSet(param).then(res => {
					console.log('提交补贴任务')
					console.log(res)
					if (res.error_code === 0) {
						// 新增成功以后,需要先隐藏新增模块,出现"再来一单"按钮
						console.log('新增成功以后')
						this.ordernum = this.addUpLoadpic = this.addUpLoadpic2 = ''
						this.getProductButieOrderFun()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
					this.isShowAddCon = this.isShow = false
				})
			},

			// 点击再来一单
			moreOder() {
				this.isHasOneKong = false //重置数据
				console.log('清除数据')
				// clearInterval(this.timer);
				this.countdownTime = ''
				this.$forceUpdate();
				let butieInfoItem = this.butieInfo.task_item
				butieInfoItem.forEach(item => {
					if (item.ordernum === '') {
						this.isHasOneKong = true
						this.addOrderUseId = item.id
					}
				})
				if (this.isHasOneKong) {
					console.log('有一个空数据')
					this.ordernum = this.addUpLoadpic = this.addUpLoadpic2 = ''
					this.isShowAddCon = true
				} else {
					console.log('没有空数据')
					console.log('点击-再来一单')
					this.getProductButieOrderFun()
					let param_1 = {
						openid: this.openid,
						gid: this.butieInfo.gid
					}
					productButieGoOn(param_1).then(res => {
						console.log('继续补贴任务')
						console.log(res)
						if (res.error_code === 0) {
							this.addOrderUseId = res.data.id
							// 拿到id以后去新增
							this.isShowAddCon = true
							this.addBtnStatue = false
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}

			},


			// 修改订单
			modifyOrder(item2) {
				console.log('点击修改')
				console.log(item2)
				// 审核中，已检验，已补贴。这三种情况都提示--无法修改,只有"检验无效"才能修改订单
				let title = this.getMsgByState(item2.state1)
				if (title !== '校验无效') {
					uni.showToast({
						icon: 'none',
						title: '该订单' + title + ',无法修改'
					})
				} else {
					console.log('进行修改--订单号')
					let param = {
						openid: this.openid,
						id: item2.id,
						ordernum: item2.ordernum,
						pic: item2.pic,
						pic2: item2.pic2
					}
					this.productButieOrderSetFun(param)
				}

			},


			// 上传图片
			chooseImageBtn(HandleType, type, item2, index) {
				let that = this
				// 前面两个图片修改-需要判断是"检验无效"才能修改
				let title = that.getMsgByState(item2.state1)
				if (type === 'upLoadpic' || type === 'upLoadpic2') {
					if (title !== '校验无效') {
						uni.showToast({
							icon: 'none',
							title: '该图片' + title + ',无法修改'
						})
						return
					}
				}else{
					if (title === '审核中' || title === '校验无效') {
						uni.showToast({
							icon: 'none',
							title: '该订单' + title + ',无法新增'
						})
						return
					}
				}
				// 判断是哪个地方上传的图片
				uni.chooseImage({
					count: 1,
					sizeType: "original",
					sourceType: ['album', 'camera'], //从相册选择
					success(res) {
						console.log('上传图片')
						console.log(res)
						uni.uploadFile({
							url: 'https://moshangweilai.herobing.com/other/pingpic', //上传接口地址
							name: 'pic', //后端接收的文件参数名
							filePath: res.tempFilePaths[0], //要上传的文件路径
							formData: {},
							header: {
								"Content-Type": "multipart/form-data"
							},
							success: (uploadFileRes) => {
								console.log('后端返回的图片')
								let res = JSON.parse(uploadFileRes.data)
								console.log(res);
								if (res.error_code === 0) {
									let pic = res.data.pic
									if (HandleType === 'add') {
										console.log('新增--传图片')
										if (type === 'upLoadpic') {
											// that.upLoadpic = pic
											that.addUpLoadpic = pic
										} else if (type === 'upLoadpic2') {
											that.addUpLoadpic2 = pic
										}
										that.getAddBtnStatue()
									} else {
										console.log('编辑--传图片')
										
										if (type === 'upLoadpic') {
											// that.upLoadpic = pic

											// 上传后,立即请求接口进行修改：审核中，已检验，已补贴。这三种情况都提示--无法修改,只有"检验无效"才能修改

											that.butieInfo.task_item[index].pic = pic
											that.butieInfo.task_item[index].isShowMengBan_1 = false
											console.log('进行修改--客服聊天图')
											let param = {
												openid: that.openid,
												id: item2.id,
												ordernum: item2.ordernum,
												pic: item2.pic,
												pic2: item2.pic2
											}
											that.productButieOrderSetFun(param)
											that.getProductButieOrderFun()
										} else if (type === 'upLoadpic2') {
											that.butieInfo.task_item[index].pic2 = pic
											that.butieInfo.task_item[index].isShowMengBan_2 = false
											console.log('进行修改--支付订单图')
											let param = {
												openid: that.openid,
												id: item2.id,
												ordernum: item2.ordernum,
												pic: item2.pic,
												pic2: item2.pic2
											}
											that.productButieOrderSetFun(param)
											that.getProductButieOrderFun()
										} else if (type === 'upLoadpic3') {
											that.butieInfo.task_item[index].pic3 = pic
											that.butieInfo.task_item[index].isShowMengBan_3 = false
											let param = {
												openid: that.openid,
												id: item2.id,
												ordernum: item2.ordernum,
												pic3: item2.pic3
											}
											that.productButieOrderSetFun(param)
											that.getProductButieOrderFun()
										} else if (type === 'upLoadpic4') {
											that.butieInfo.task_item[index].pic4 = pic
											that.butieInfo.task_item[index].isShowMengBan_4 = false
											let param = {
												openid: that.openid,
												id: item2.id,
												ordernum: item2.ordernum,
												pic4: item2.pic4
											}
											that.productButieOrderSetFun(param)
											that.getProductButieOrderFun()
										}
									}
									that.$forceUpdate()
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}

							},
						})
					}
				})
			},
			showTan_wen() {
				this.isShow_wen = true
			},
			hideTan() {
				this.isShow_wen = this.isShow = false
			},
			// 超时提醒弹窗-点击后"我已知晓"
			hideTan_timeOut() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 个位数补0操作
			getTwoNum(num) {
				if (num < 10) {
					return num = '0' + num
				} else {
					return num
				}
			},
			// 10分钟倒计时
			startCountdown(duration) {
				const now = new Date();
				const countdownEnd = now.getTime() + duration;

				this.timer = setInterval(() => {
					const timeLeft = countdownEnd - new Date().getTime();

					if (timeLeft <= 0) {
						clearInterval(this.timer);
						console.log('倒计时结束！');
						// 这里可以添加倒计时结束时需要执行的代码
						this.isEndTime = this.isShow_timeOut = true

					} else {

						const minutes = this.getTwoNum(Math.floor(timeLeft / 60000));
						const seconds = this.getTwoNum(((timeLeft % 60000) / 1000).toFixed(0));
						// console.log(`倒计时: ${minutes}:${seconds}`);
						// 这里可以更新页面上的显示时间
						this.CountdownTime = minutes + ':' + seconds
						// console.log(this.CountdownTime)
					}
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	.con {
		.top {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			position: relative;
			z-index: 1;
			padding-top: 54rpx;

			.top1 {
				width: 100%;
				height: auto;
				align-items: normal;

				.top1v1 {
					width: 400rpx;
					height: 140rpx;
					border-radius: 0px 100rpx 100rpx 0px;
					background-color: rgba(249, 191, 65, 1);
					padding: 16rpx 30rpx;
					box-sizing: border-box;

					.top1v1_1 {
						.top1v1_1v1 {
							line-height: 58rpx;
							color: rgba(16, 16, 16, 1);
							font-size: 48rpx;
							font-family: 'AvantGardeFont';
							font-weight: bold;
							margin-top: 5rpx;

							text {
								font-weight: 100;
							}
						}

						.top1v1_1img {
							width: 24rpx;
							position: relative;
							top: -15rpx;
						}
					}

					.top1v1_2 {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						margin-top: 6rpx;
					}
				}

				.top1v2 {
					width: 220rpx;
					height: 68rpx;
					border-radius: 100rpx;
					background-color: rgba(249, 191, 65, 1);
					justify-content: center;
					margin-right: 30rpx;

					.top1v2_img {
						width: 48rpx;
						height: auto;
					}

					.top1v2_v {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
					}
				}

			}

			.top2 {
				width: 650rpx;
				height: auto;
				margin: 30rpx;
				box-sizing: border-box;
				border-top: 2rpx solid #d3d3d3;
				padding: 30rpx 0;
				margin-top: 50rpx;
				margin-bottom: 20rpx;

				.top2li {
					width: 25%;
					text-align: center;

					.top2li_1 {
						width: 16rpx;
						height: 16rpx;
						border-radius: 100%;
						margin: 0 auto;
						position: relative;
						top: -38rpx;
						background-color: rgba(137, 137, 137, 1);
					}

					.top2li_2 {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						margin-top: -20rpx;
					}
				}
			}
		}

		.guolv {
			width: 100%;
			height: 90rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			padding-right: 0;
			z-index: 1;
			position: relative;

			.guolv_v1 {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
			}
		}

		.list {
			width: 100%;
			height: auto;

			.listli {
				width: 100%;
				height: 334rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 1);
				overflow: hidden;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.listlit {
					width: 100%;
					height: 200rpx;
					align-items: normal;
					overflow: hidden;

					.listlitz {
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
						// overflow: hidden;
						position: relative;
						margin-right: 34rpx;

						.listlitz_img {
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}

						.listlity1z1_v {
							width: 300rpx;
						}

						.listlitz_1 {
							position: absolute;
							height: 32rpx;
							border-radius: 0px 40rpx 40rpx 0px;
							background-color: rgba(249, 65, 65, 1);
							display: inline-block;
							color: rgba(255, 255, 255, 1);
							font-size: 24rpx;
							left: 0;
							top: 20rpx;
							line-height: 27rpx;
							padding: 0 10rpx;
						}

						.listlitz_2 {
							width: 100%;
							height: 44rpx;
							line-height: 44rpx;
							border-radius: 0px 0px 10px 10px;
							background-color: rgba(249, 191, 65, 1);
							color: rgba(16, 16, 16, 1);
							font-size: 24rpx;
							overflow: hidden;
							position: absolute;
							bottom: 0;
							text-align: center;
						}
					}

					.listlity {
						width: 500rpx;
						height: 200rpx;

						.listlity1 {
							width: 100%;

							box-sizing: border-box;

							.listlity1z {
								width: 100%;

								.listlity1z1 {
									.listlity1z1_img {
										width: 32rpx;
										height: auto;
										margin-right: 10rpx;
									}

									.listlity1z1_v {
										width: 210rpx;
										height: 36rpx;
										line-height: 36rpx;
										color: rgba(16, 16, 16, 1);
										font-size: 28rpx;
										overflow: hidden;
									}
								}

								.listlity1z2 {
									height: 36rpx;
									line-height: 40rpx;
									border-radius: 40rpx;
									background-color: rgba(216, 30, 6, 1);
									color: rgba(16, 16, 16, 1);
									font-size: 28rpx;
									padding: 0 10rpx;
									padding-right: 20rpx;

									.listlity1z2_img {
										width: 36rpx;
										height: auto;
									}

									.listlity1z2_v {
										color: rgba(255, 255, 255, 1);
										font-size: 28rpx;
										margin-left: 8rpx;
										font-family: 'AvantGardeFont';
									}
								}
							}

						}

						.listlity2 {
							width: 100%;
							padding-right: 30rpx;
							box-sizing: border-box;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							font-family: 'AvantGardeFont';
							margin-top: 14rpx;

							text {
								font-size: 46rpx;
							}
						}

						.listlity3 {
							width: 100%;
							box-sizing: border-box;
							color: rgba(137, 137, 137, 1);
							font-size: 24rpx;
							width: 100%;
							text-align: right;

							text {
								font-family: 'AvantGardeFont';
							}
						}

						.listlity4 {
							width: 100%;
							box-sizing: border-box;

							.listlity4cc {
								width: 100%;
								height: 16rpx;
								border-radius: 20rpx;
								margin-top: 6rpx;
								background-color: rgba(232, 230, 230, 1);
								position: relative;
							}

							text {
								width: 30%;
								height: 16rpx;
								border-radius: 20rpx;
								display: inline-block;
								background-color: rgba(249, 191, 65, 1);
								position: absolute;
								top: 0;
								left: 0;
								;
							}
						}
					}
				}

				.listlib {
					width: 100%;
					height: auto;
					padding: 30rpx 0;
					padding-bottom: 0;
					box-sizing: border-box;

					.listlib_1 {
						width: 310rpx;
						height: 44rpx;
						background: #f00;
						line-height: 44rpx;
						border-radius: 40rpx;
						overflow: hidden;

						.listlib_1_t1 {
							background-color: rgba(249, 191, 65, 1);
							width: 50%;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							height: 44rpx;
							display: block;
							text-align: center;
						}

						.listlib_1_t2 {
							background-color: rgba(0, 0, 0, 1);
							width: 50%;
							color: #fff;
							font-size: 24rpx;
							height: 44rpx;
							display: block;
							text-align: center;
						}

						.listlib_1_t3 {
							background-color: rgba(232, 230, 230, 1);
							width: 50%;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							height: 44rpx;
							display: block;
							text-align: center;
						}
					}
				}
			}
		}

		.zhes_1 {
			width: 100%;
			height: auto;
			text-align: center;
			margin-bottom: 28rpx;
			justify-content: center;

			.zhes_1_img {
				width: 40rpx;
				height: auto;
				margin-right: 8rpx;
			}

			.zhes_1_t {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.zhes_2 {
			width: 100%;
			height: auto;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;

			.zhes_2li {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
				font-weight: bold;
				margin-right: 5rpx;

				text {
					font-family: 'AvantGardeFont';
				}
			}
		}

		.zhes_3 {
			height: 32rpx;
			line-height: 32rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			width: 100%;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.zhes_4 {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background-color: rgba(238, 238, 238, 1);
			padding: 20rpx 30rpx;
			color: rgba(249, 65, 65, 1);
			font-size: 24rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			margin-bottom: 48rpx;
		}

		.zhes_5 {
			width: 100%;
			height: 72rpx;
			border-radius: 100rpx;
			background-color: rgba(249, 191, 65, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			text-align: center;
			line-height: 72rpx;
		}

		.tan {
			padding-bottom: 56rpx;
			margin-top: -272rpx;
		}
	}

	.tan_video {
		width: 650rpx;
		height: 1105rpx;
		padding: 0 0;
		margin-left: -325rpx;
	}

	.tan.tan_video {
		margin-top: -552rpx;
	}

	video {
		width: 650rpx;
		height: 1105rpx;
	}

	.zhen_add {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: rgba(255, 246, 228, 1);
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		padding: 10rpx 16rpx;
		box-sizing: border-box;
		margin-top: 12rpx;
	}

	.zhn {
		width: 100%;
		height: auto;

		.zhn_img {
			display: block;
			width: 100%;
			height: auto;
			margin-bottom: 20rpx;
		}

		.zhnc {
			width: 100%;
			height: auto;
			align-items: flex-end;

			.zhnc_z {
				// width: 328rpx;
				// height: 120rpx;
				// border-radius: 10rpx;
				// padding: 14rpx 24rpx;
				align-items: baseline;
				box-sizing: border-box;
				height: 90rpx;
				overflow: hidden;
				// background-color: rgba(255, 246, 228, 1);
				position: relative;
				width: 300rpx;

				.zhnc_z1 {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					// line-height: 32rpx;
					margin-right: 12rpx;
					bottom: 20rpx;
					right: 160rpx;
					position: absolute;
				}

				.zhnc_z2 {
					right: 0;
					position: absolute;
					line-height: 90rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 60rpx;
					font-family: 'AvantGardeFont';
					width: 160rpx;
					height: 90rpx;
				}
			}

			.zhnc_y {
				.zhnc_y_img {
					width: 32rpx;
					height: auto;
					margin-right: 8rpx;
				}

				.zhnc_yc {
					line-height: 40rpx;
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
				}
			}
		}
	}

	.tia {
		width: 100%;
		height: auto;

		.tiaz {
			.tiazz {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
			}

			.tiazy {
				width: 24rpx;
				height: auto;
				margin-top: -12rpx;
				margin-left: 6rpx;
			}
		}

		.tiay {
			width: 200rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 40rpx;
			background-color: rgba(0, 0, 0, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			display: inline-block;
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			text-align: center;
			margin-left: 20rpx;
		}

		.tiay.huangse {
			background: #F9BF41;
			color: rgba(16, 16, 16, 1);
		}

		.tiay.huangse2 {
			background-color: rgba(255, 246, 228, 1);
			color: rgba(16, 16, 16, 1);
		}

		.tiay.huise {
			background-color: #cecece;
			color: rgba(16, 16, 16, 1);
		}
	}

	.tiazlist {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: rgba(255, 246, 228, 1);
		padding: 20rpx;
		box-sizing: border-box;
		line-height: 32rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 24rpx;
		margin: 30rpx 0;

		.tiazlistli {
			margin-bottom: 10rpx;
		}
	}

	.tiazlist1 {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: rgba(255, 246, 228, 1);
		padding: 0 20rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 24rpx;
		margin: 30rpx 0;
		margin-top: 0;
		margin-bottom: 16rpx;

		.tiazlistli {
			display: block;
			height: 80rpx;
			line-height: 80rpx;
			width: 100%;
			margin-bottom: 10rpx;
		}
	}

	.qiji_l {
		width: 100%;
		height: auto;

		.qiji_l_t {
			line-height: 40rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			margin-bottom: 28rpx;
		}

		.qiji_l_c {
			width: 100%;
			height: auto;
			margin-bottom: 16rpx;

			.qiji_l_c_ipt {
				width: 526rpx;
				height: 80rpx;
				line-height: 80rpx;
				line-height: 40rpx;
				border-radius: 10rpx 0px 0px 10rpx;
				background-color: rgba(238, 238, 238, 1);
				color: rgba(136, 136, 136, 1);
				font-size: 24rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}

			.qiji_l_c_btn {
				width: 120rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 0px 10rpx 10rpx 0px;
				background-color: rgba(249, 191, 65, 1);
				color: rgba(16, 16, 16, 1);
				font-size: 24rpx;
				text-align: center;
			}

			.qiji_l_c_btn.huise {
				background-color: rgba(206, 206, 206, 1);
				color: rgba(0, 0, 0, 1);
			}


		}

		.qiji_l_b2 {
			width: 100%;
			height: auto;

			.qiji_l_b2_img {
				width: 32rpx;
				height: auto;
				margin-right: 6rpx;
			}

			.qiji_l_b2_c {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx
			}
		}
	}

	.qiji_l_b_img2 {
		width: 160rpx;
		height: auto;
		display: block;
	}

	.qiji_l_b {
		width: 100%;
		height: 160rpx;
		border-radius: 10rpx;
		// background-color: rgba(247,247,247,1);
		// margin-bottom: 40rpx;

		.qiji_l_b_li {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			text-align: center;
			justify-content: center;
			overflow: hidden;
			background-color: rgba(255, 246, 228, 1);
			margin-right: 16rpx;
			position: relative;
			overflow: hidden;

			.mengban {
				position: absolute;
				width: 160rpx;
				height: 160rpx;
				background-color: rgba(0, 0, 0, 0.5);
				top: 0;
				left: 0;
				color: rgba(255, 255, 255, 1);
				font-size: 24rpx;
				line-height: 160rpx;
				text-align: center;
				font-weight: bold;
			}
		}

		.qiji_l_b_li:last-child {
			margin-right: 0;
		}

		.qiji_l_b_img {
			width: 36rpx;
			height: auto;
			margin-right: 10rpx;
		}

		.qiji_l_b_con {
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
		}

	}

	.tijiaBtn {
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 20rpx;
		background-color: rgba(211, 211, 211, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 32rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.tijiaBtn.huanse {
		background-color: rgba(249, 191, 65, 1);
	}
</style>